<template>
  <div class="transaction-edit">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>编辑交易记录</span>
        </div>
      </template>

      <el-form
        v-loading="loading"
        ref="transactionForm"
        :model="transactionForm"
        :rules="rules"
        label-width="120px"
        style="max-width: 800px;"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="支付平台" prop="paymentPlatform">
              <el-radio-group v-model="transactionForm.paymentPlatform">
                <el-radio label="Alipay">支付宝</el-radio>
                <el-radio label="WeChat">微信</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易时间" prop="transactionTime">
              <el-date-picker
                v-model="transactionForm.transactionTime"
                type="datetime"
                placeholder="选择交易时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交易分类" prop="transactionCategory">
              <el-input
                v-model="transactionForm.transactionCategory"
                placeholder="请输入交易分类"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易对方" prop="transactionPartner">
              <el-input
                v-model="transactionForm.transactionPartner"
                placeholder="请输入交易对方"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="对方账号" prop="partnerAccount">
              <el-input
                v-model="transactionForm.partnerAccount"
                placeholder="请输入对方账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品说明" prop="productDescription">
              <el-input
                v-model="transactionForm.productDescription"
                placeholder="请输入商品说明"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收支类型" prop="incomeExpense">
              <el-select v-model="transactionForm.incomeExpense" placeholder="请选择收支类型">
                <el-option label="收入" value="收入"></el-option>
                <el-option label="支出" value="支出"></el-option>
                <el-option label="不计收支" value="不计收支"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <el-input
                v-model.number="transactionForm.amount"
                placeholder="请输入金额"
                type="number"
                :min="0"
                :step="0.01"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收/付款方式" prop="paymentMethod">
              <el-input
                v-model="transactionForm.paymentMethod"
                placeholder="请输入收/付款方式"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易状态" prop="transactionStatus">
              <el-input
                v-model="transactionForm.transactionStatus"
                placeholder="请输入交易状态"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交易订单号" prop="transactionOrderNumber">
              <el-input
                v-model="transactionForm.transactionOrderNumber"
                placeholder="请输入交易订单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商家订单号" prop="merchantOrderNumber">
              <el-input
                v-model="transactionForm.merchantOrderNumber"
                placeholder="请输入商家订单号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input
            v-model="transactionForm.remarks"
            placeholder="请输入备注信息"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="goBack">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { transactionService } from '@/api/transactionService'

export default {
  name: 'TransactionEdit',
  data() {
    return {
      loading: false,
      transactionForm: {
        id: null,
        paymentPlatform: 'Alipay',
        transactionTime: new Date(),
        transactionCategory: '',
        transactionPartner: '',
        partnerAccount: '',
        productDescription: '',
        incomeExpense: '支出',
        amount: 0,
        paymentMethod: '',
        transactionStatus: '成功',
        transactionOrderNumber: '',
        merchantOrderNumber: '',
        remarks: ''
      },
      rules: {
        paymentPlatform: [
          { required: true, message: '请选择支付平台', trigger: 'change' }
        ],
        transactionTime: [
          { required: true, message: '请选择交易时间', trigger: 'change' }
        ],
        transactionPartner: [
          { required: true, message: '请输入交易对方', trigger: 'blur' }
        ],
        incomeExpense: [
          { required: true, message: '请选择收支类型', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { type: 'number', min: 0, message: '金额必须大于等于0', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadTransactionData()
  },
  methods: {
    loadTransactionData() {
      const { id } = this.$route.params
      if (id) {
        this.loading = true
        transactionService.getTransactionById(id)
          .then(response => {
            const data = response
            // 处理日期格式
            if (data.transactionTime) {
              data.transactionTime = new Date(data.transactionTime)
            }
            this.transactionForm = data
          })
          .catch(error => {
            this.$message.error('加载交易记录失败')
            console.error(error)
            this.$router.push('/transaction-list')
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    submitForm() {
      this.$refs.transactionForm.validate((valid) => {
        if (valid) {
          // 转换日期格式
          const formData = {
            ...this.transactionForm,
            transactionTime: this.transactionForm.transactionTime ? new Date(this.transactionForm.transactionTime).toISOString() : null
          }
          
          transactionService.updateTransaction(this.transactionForm.id, formData)
            .then(() => {
              this.$message.success('交易记录更新成功！')
              this.$router.push('/transaction-list')
            })
            .catch(error => {
              this.$message.error('更新失败，请重试')
              console.error(error)
            })
        } else {
          this.$message.error('表单验证失败，请检查必填项')
          return false
        }
      })
    },
    resetForm() {
      this.loadTransactionData()
    },
    goBack() {
      this.$router.push('/transaction-list')
    }
  }
}
</script>

<style scoped>
.transaction-edit {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form {
  margin-top: 20px;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>